<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>登录</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" href="../../icon/fonticon/iconfont.css" />
    <style>
        input::placeholder {
            color: #fff;
        }

        -moz-input::placeholder {
            color: #fff;
        }

        -o-input::placeholder {
            color: #fff;
        }

        -webkit::placeholder {
            color: #fff;
        }

        html,
        body {
            height: 100%;
        }

        body {
            height: 100%;
            display: flex;
            flex-direction: column;
            flex: 1 1;
            justify-content: flex-start;
            ;
            align-items: center;
            background: url('../../image/bg.jpeg') center center no-repeat;
            background-size: cover;
        }

        .logo {
            margin: 7rem auto 1rem;
            width: 5rem;
            height: 5rem;
            overflow: hidden;
        }

        .logo img {
            display: block;
            width: 100%;
            height: auto;
        }

        .lg_pane {
            width: 15rem;
        }

        .lg_info {
            position: relative;
            margin-bottom: 1rem;
            height: 2rem;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
            flex-wrap: nowrap;
            border-bottom: 1px solid #fff;
        }

        .lg_info i {
            display: block;
            font-size: 1rem;
            width: 2rem;
            height: 2rem;
            line-height: 2rem;
            color: #fff;
        }

        .clearinfo {
            opacity: 0;
            display: block;
            position: absolute;
            width: 1rem;
            height: 2rem;
            right: 0;
            top: 0;
            line-height: 1rem;
            font-size: 1rem;
        }

        .clearinfo.active {
            opacity: 1;
        }

        .lg_info input {
            flex: 1 auto;
            color: #fff;
        }

        .lg_btn {
            margin-top: 2rem;
            width: 15rem;
            height: 2rem;
            line-height: 2rem;
            text-align: center;
            color: #fff;
            background: #03a9f4;
            border-radius: 0.5rem;
        }

        .tap-active {
            opacity: 0.8;
        }
    </style>
</head>

<body>
    <div class="logo">
        <img src="../../image/logo.jpeg" alt="" />
    </div>
    <div class="lg_pane">
        <div class="lg_info">
            <i class="iconfont icon-zhanghao"></i>
            <span class="clearinfo"><i class="iconfont icon-icon-test1"></i></span>
            <input class="usrcount" type="text" name="usercount" placeholder="请输入账号" />
        </div>
        <div class="lg_info">
            <i class="iconfont icon-icon-test"></i>
            <span class="clearinfo"><i class="iconfont icon-icon-test1"></i></span>
            <input class="usrpwd" type="password" name="userpwd" placeholder="请输入密码" />
        </div>
        <span class="lg_btn" tapmode="tap-active" onclick="usrljj()">登录</span>
    </div>
</body>
<script src="https://cdn.bootcss.com/zepto/1.2.0/zepto.min.js" charset="utf-8"></script>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript">
    let flag = true;
    apiready = function() {
            const token = $api.getStorage("token");
            if (token) {
                let username = $api.getStorage('username');
                $api.val($api.dom('.usrcount'), username);
                api.openWin({
                    name: 'main',
                    url: '../../index.html'
                });
            }
        }
    // 用户登录
    function usrljj() {
        const usrcount = $api.val($api.dom('.usrcount'));
        const usrpwd = $api.val($api.dom('.usrpwd'));
        if (flag && $api.trim(usrcount) && $api.trim(usrpwd)) {
            flag = false;
            api.showProgress({
                style: 'default',
                animationType: 'fade',
                title: '努力加载中...',
                text: '先喝杯茶...',
                modal: true
            });
            api.ajax({
                url: $api.SERVE_URL + 'index.php/index/login/login',
                method: 'post',
                dataType: "json",
                timeout: 30,
                data: {
                    values: {
                        "username": usrcount,
                        "password": usrpwd,
                        "checked": true
                    }
                }
            }, function(ret, err) {
                const data = ret.data;
                if (ret.code === 200) {
                    flag = true;
                    api.hideProgress();
                    $api.setStorage('username', usrcount);
                    $api.setStorage('token', data.token);
                    $api.setStorage('role', data.types);
                    $api.setStorage('uid', data.uid);
                    api.closeWin({
                        name: 'login'
                    });
                    api.openWin({
                        name: 'main',
                        url: '../../index.html'
                    });
                } else {
                    flag = true;
                    api.hideProgress();
                    api.toast({
                        msg: ret.msg,
                        duration: 2000,
                        location: 'top'
                    });
                }
            });
        } else {
            api.toast({
                msg: '用户信息填写有误！',
                duration: 2000,
                location: 'top'
            });

        }
    };
</script>

</html>
